<!--评价管理-->
<template>
  <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="店铺名" prop="shopName">
            <el-input
              v-model="queryParams.shopName"
              placeholder="请输入店铺名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="主播名" prop="anchorName">
            <el-input
              v-model="queryParams.anchorName"
              placeholder="请输入主播名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
         <el-form-item label="商品名" prop="name">
            <el-input
              v-model="queryParams.name"
              placeholder="请输入商品名"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="带货主播" align="center" prop="anchorName" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="带货店铺" align="center" prop="shopName" width="120" :show-overflow-tooltip="true"/>
      <!--      1:普通评论2:商家评论-->
      <el-table-column label="商品" align="left" prop="name" width="500" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleProduct(scope.row)"
            v-hasPermi="['car:comment:edit']"
          >{{scope.row.name}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="已带货数量" align="center" prop="totalNum" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="带货金额" align="center" prop="totalMoney" width="120" :show-overflow-tooltip="true">
      <template slot-scope="scope">
        <span>{{$yun.priceFormatter(scope.row.totalMoney)}}</span>
      </template>
      </el-table-column>
      <el-table-column label="销售单价" align="center" prop="price" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.price)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="time" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.time, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDetails(scope.row)"
              v-hasPermi="['car:comment:edit']"
            >详情
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />

    <!-- 详情 -->
    <el-dialog title="带货详情" :visible.sync="openDetails" width="500px" append-to-body>
      <el-descriptions class="margin-top" title="" :column="2" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            带货数量
          </template>
          {{currentDetail.totalNum}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            销售额
          </template>
          {{currentDetail.totalMoney}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            退单数量
          </template>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            订单时间
          </template>
          {{ parseTime(currentDetail.time, '{m}/{d}/{y}') }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            销售单价
          </template>
          {{currentDetail.price}}
        </el-descriptions-item>
      </el-descriptions>

    </el-dialog>
    <!--    商品信息-->
    <el-dialog title="带货商品信息" :visible.sync="open" width="700px" append-to-body>
      <el-descriptions class="margin-top" title="" :column="2" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            商品名字
          </template>
          {{currentDetail.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            已带货数
          </template>
          {{currentDetail.totalNum}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            已带金额
          </template>
          {{currentDetail.totalMoney}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            已带单价
          </template>
          {{currentDetail.price}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import {
  dataList
} from '@/api/store/anchorProduct'
import Template from '@/views/setting/template/index.vue'
export default {
  name: 'anchorProduct',
  components: { Template },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      openDetails: false,
      queryParams: {
        'size': 10,
        'current': 1,
        shopId:null,
      },
      currentDetail:{},
    }
  },
  created() {
    console.log('this.$route.query',this.$route.query)
    if(this.$route.query.shopId){
      this.queryParams.shopId = this.$route.query.shopId
    }
    this.getList()
  },
  methods: {
    /** 查询商品评论列表 */
    getList() {
      this.loading = true
      dataList(this.queryParams).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 查看详情 */
    handleDetails(row) {
      this.currentDetail = row;
      this.openDetails = true;
     /*  products({ pageSize: 20, pageNum: 1 }).then(response => {
        let resData = response.data.records;
        let skus = [];
        for (let i = 0; i < resData.length ; i++) {
          skus = [...skus,...resData[i].goodsSkus];
        }
        console.log(skus)
        this.productsList = skus;
      }) */
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    //查看商品
    handleProduct: function(row) {
      this.currentDetail = row;
      this.open = true;
    },
  }
}
</script>
